import React from 'react';
import { Form, Select } from 'antd';
import { IMetaFormProps, MetadataFormContext } from '../interface';
import { useGetExtraInfo } from '../hooks';

const { Option } = Select;

const mockVal = (str: string, repeat: number = 1) => ({
  value: `${str.repeat(repeat)} 123`,
  label: str.repeat(repeat),
});

function Index(props: IMetaFormProps) {
  const { id, require } = props;
  const formContext: any = React.useContext(MetadataFormContext) || {};
  const extraInfo = useGetExtraInfo(formContext.fields, id, formContext.form);
  console.log('extraInfo', extraInfo);
  console.log('formContext', formContext);

  const [options, setOptions] = React.useState<{ value: string; label: string }[]>([]);

  const onSearch = (value: string) => {
    setOptions(!value ? [] : [mockVal(value), mockVal(value, 2), mockVal(value, 3)]);
  };

  return (
    <Form.Item label={extraInfo?.label || id} name={id} rules={[{ required: require }]} help={extraInfo?.help} tooltip={extraInfo?.tooltip}>
      <Select
        showSearch
        allowClear
        placeholder={extraInfo.placeholder}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={onSearch}
        notFoundContent={null}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value}>
            {option.label}
          </Option>
        ))}
      </Select>
    </Form.Item>
  );
}

export default React.memo(Index);
